<template>
  <div class="index" v-loading="loading">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <!-- 任务行业查询 start -->
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!--        <el-form-item>-->
        <!--          <el-select v-model="formInline.region" placeholder="工单类型">-->
        <!--            <el-option label="正常" value="shanghai"></el-option>-->
        <!--            <el-option label="关闭" value="beijing"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item>
          <el-input
            v-model="formInline.orderName"
            placeholder="工单名称"
          ></el-input>
        </el-form-item>
        <!--        <el-form-item>-->
        <!--          <el-input v-model="formInline.user" placeholder="价格区间"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#d9d9d9',
          color: 'rgb(16, 116, 253)',
        }"
        @cell-mouse-enter="clickIndex"
      >
        <el-table-column prop="workId" label="工单ID"> </el-table-column>
        <el-table-column prop="orderName" label="工单名称"> </el-table-column>
        <el-table-column prop="orderType" label="工单类型"> </el-table-column>
        <el-table-column prop="status" label="工单状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">关闭</div>
            <div v-if="scope.row.status == 1">正常</div>
          </template>
        </el-table-column>
        <el-table-column label="日目标/总目标">
          <template slot-scope="scope"
            >{{ scope.row.everydayTarget }}/{{
              scope.row.everyTarget
            }}</template
          >
        </el-table-column>
        <el-table-column label="备注/说明">
          <template slot-scope="scope"
            >{{ scope.row.remark }}/{{ scope.row.explanation }}</template
          >
        </el-table-column>
        <!-- <el-table-column
          prop="price"
          label="粉单价">
        </el-table-column>
        <el-table-column
          prop="country"
          label="粉国家">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="粉性别">
          <template slot-scope="scope">
            <div v-if="scope.row.sex == 0">不限</div>
            <div v-if="scope.row.sex == 1">男</div>
            <div v-if="scope.row.sex == 2">女</div>
          </template>
        </el-table-column>
        <el-table-column
          label="粉年龄">
          <template slot-scope="scope">{{scope.row.minAge}}-{{scope.row.maxAge}}</template>
        </el-table-column> -->
        <el-table-column prop="requirements" label="话术要求">
        </el-table-column>
        <!-- <el-table-column
          prop="resetTime"
          label="单日置零时间">
        </el-table-column> -->
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="requirements" label="工作室数据">
          <i
            class="el-icon-document-copy"
            style="color: green"
            @click="studioData"
          ></i>
        </el-table-column>
        <el-table-column prop="requirements" label="粉丝要求">
          <i
            class="el-icon-star-off"
            style="color: green"
            @click.stop="fansMessage"
          ></i>
        </el-table-column>
        <el-table-column prop="requirements" label="工单详情">
          <i
            class="el-icon-info"
            style="color: green"
            @click="detailOrder"
          ></i>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="formInline.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        style="text-align: center; margin-top: 20px"
      >
      </el-pagination>
    </el-card>
    <!-- 任务行业查询 end -->
  </div>
</template>

<script>
import ModuleTitle from "@/components/content/ModuleTitle.vue";

// import { createSign } from "@/utils/sign";
import API from "@/network/api/smsApi";
export default {
  name: "index",
  data() {
    return {
      moduleTitle: "计数器工单管理",
      formInline: {
        orderName: "",
        orderType: "",
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      dataRow: null,
      total: 0,
      loading: false,
    };
  },
  created() {
    this.orderList();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      this.orderQuery()
    },
    orderQuery () {
      console.log(this.formInline.orderName);
      console.log(this.formInline);
      API.queryAllWorkOder(this.formInline).then(res => {
        console.log(res)
        this.tableData = res.data.data.records
      })
    },
    onReset() {
      this.formInline.orderName = "";
      this.orderList();
    },
    orderList() {
      this.loading = true;
      API.queryAllWorkOder(this.formInline).then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        }
        this.loading = false;
      });
    },
    handleCurrentChange(val) {
      console.log(val);
      this.formInline.pageNum = val;
      this.orderList();
    },
    fansMessage() {
      this.$alert(
        `<strong>
      <i>
      <div>粉单价：${this.dataRow.price}</div>
      <div style="
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;"
      >粉国家：${this.dataRow.country}
      </div>
      <div>粉性别：${
        this.dataRow.sex == 0
          ? "不限"
          : this.dataRow.sex == 1
          ? "男"
          : this.dataRow.sex == 2
          ? "女"
          : ""
      }</div>
      <div>粉年龄：${this.dataRow.minAge} ~ ${
          this.dataRow.maxAge
        }</div>
      </i> </strong>`,
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    /**
     * 新增
     */
    clickIndex(row, event, column) {
      console.log(row)
      this.dataRow = row
      console.log(this.dataRow);
      console.log(this.dataRow.price)
      this.$store.commit('orderManage', row);
    },
    detailOrder() {
      // console.log(this.$store.state.dataRow);
      this.$router.push({ name: 'orderDetail'});
    },
    studioData() {
      console.log('工作室数据');
      this.$router.push({ name: 'studioData'})
    }
    /**
     * 新增
     */
  },
  components: { ModuleTitle },
};
</script>

<style scoped>
.card-title {
  color: #1074fd;
  font-size: 18px;
  margin-bottom: 14px;
}

/* 任务行业查询 */
.trade-query-label {
  color: #1a1a1a;
  font-size: 18px;
}
.trade-query-input {
  width: 225px;
  height: 44px;
  margin-left: 10px;
  margin-right: 30px;
}
.trade-query-button {
  width: 64px;
  height: 40px;
  padding: 0;
  border-width: 0;
  background-color: #1074fd;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 18px;
}

/* 任务行业列表 */
.list {
  position: relative;
  width: 48%;
  height: 356px;
  border: 1px solid #d9d9d9;
}
.list-header {
  display: flex;
  height: 50px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #d9d9d9;
  text-align: center;
  line-height: 50px;
}
.list-body {
  display: flex;
  height: 51px;
  border-bottom: 1px solid #d9d9d9;
  text-align: center;
  line-height: 50px;
}
.add-button {
  background-color: #1074fd;
  color: #ffffff;
  border: 1px solid #1074fd;
}
.stand-center {
  width: 100% !important;
}
.noneList {
  position: relative;
  width: 100%;
  height: 356px;
  margin: 0 auto 40px;
  text-align: center;
  line-height: 356px;
  font-size: 30px;
}
</style>
